<template>
  <div class="EvaluateReport wh-full flex-col">
    <div class="mb-10 flex flex-shrink-0 items-center justify-end gap-8">
      <n-button @click="backHome">
        <n-icon size="16" :component="ArrowLeft" style="margin-right: 4px" />
        返回首页
      </n-button>
    </div>
    <Vue3PdfApp style="width: 100%; height: 700px" :pdf="pdf" />
  </div>
</template>
<script setup lang="jsx">
import * as evaluateRecordApi from '@/api/evaluateRecord'
import ArrowLeft from '@vicons/carbon/ArrowLeft'
import Vue3PdfApp from 'vue3-pdf-app'
import 'vue3-pdf-app/dist/icons/main.css'
import { onMounted } from 'vue'
defineOptions({
  name: 'EvaluateReport',
})
const emits = defineEmits(['loading'])
const props = defineProps({
  id: {
    type: String,
    default: null,
  },
})
const router = useRouter()
function backHome() {
  router.replace('/test')
}
const pdf = ref(null)
function getReport() {
  emits('loading', true)
  evaluateRecordApi.downloadReport({ id: props.id }).then((res) => {
    const blob = new Blob([res], { type: 'application/pdf' })
    pdf.value = window.URL.createObjectURL(blob)
    emits('loading', false)
  })
}
onMounted(() => {
  getReport()
})
</script>
<style lang="scss" scoped></style>
